<template>
	<view class="content">
		<image :src="imgUrl+goodsDetails.goods_image" mode=""></image>
		<view class="title">
			<view class="all">
				<view class="top">
					<view class="left">
						¥{{goodsDetails.price}}
					</view>
					<view class="right" @click="goPoster">
						<image src="../../../static/icon/share.png" mode=""></image>
						分享
					</view>
				</view>
				<view class="name">
					{{goodsDetails.goods_name}}
				</view>
			</view>
		</view>
		<view class="introduce">
			<view class="title">
				---- &nbsp;&nbsp;商品详情&nbsp;&nbsp; ----
			</view>
			<view class="introduce-details">
				<rich-text :nodes="goods_content"></rich-text>
			</view>
		</view>
		<view class="shop_bottom display space-between back">
			<view @click="goCart" class="shop_bottom_left display flex-direction align-items justify-content">
				<view class="icon">
					<image src="../../../static/icon/cart-shop.png" mode=""></image>
					<view v-if="cartNum!=0">{{cartNum}}</view>
				</view>
				<view class="name">购物车</view>
			</view>
			<view class="shop_bottom_right display space-between ">
				<view class="shop_bottom_right_ls display  align-items justify-content" v-if="goodsDetails.free_switch==1" style="background-color: #F5F5F5;color:#ACA899;">加入购物车</view>
				<view class="shop_bottom_right_ls display  align-items justify-content" v-else @click="showShopBuy(1)">加入购物车</view>
				<view class="shop_bottom_right_rg display align-items  justify-content" @click="showShopBuy(2)">立即购买</view>
			</view>
		</view>

		<!-- 分享 -->
		<view class="popup" v-if="showShare">
			<view class="share_popup back">
				<view class="share_popup_top display space-between">
					<button class="share_popup_top_info " open-type="share">
						<image src="../../../static/icon/wx.png" mode=""></image>
						<view>微信好友</view>
					</button>
					<view class="share_popup_top_info" @click="goPoster">
						<image src="../../../static/icon/ewm.png" mode=""></image>
						<view>二维码海报</view>
					</view>
					<view class="share_popup_top_info ">
						<!-- <image src="../../../static/icon/lj.png" mode=""></image>
						<view>复制链接</view> -->
					</view>
				</view>
				<view @click="closeShare" class="close_share">取消</view>
			</view>
		</view>
		<!-- 加入购物车或者购买 -->


		<uni-popup ref="popup" type="bottom" animation="ture">
			<view class="buy_popup back">
				<view class="buy_popup_contant display space-between">
					<view class="buy_popup_contant_left">
						<image class="buy_popup_contant_left_img" :src="imgUrl+goodsDetails.goods_image" mode=""></image>
						<view>¥{{goodsDetails.price}}</view>
					</view>
					<image @click="closeBuyIcon" class="buy_popup_contant_close" src="../../../static/icon/shop-close.png"></image>
				</view>
				<view class="buy_number_name display align-items space-between">
					<view class="buy_number_tit">数量</view>
					<view class="edit_number display align-items">
						<view class="edit_number_reduit" @click="editCart(goodsDetails.id,0)"></view>
						<view class="edit_number_num">{{shopNum}}</view>
						<view class="edit_number_add" @click="editCart(goodsDetails.id,1)"></view>
					</view>
				</view>
				<view class="btn display align-items space-center letter-spacing" @click="closeBuy">确定</view>
			</view>
		</uni-popup>

		<!-- 彈窗 登錄-->
		<is-login v-on:childClick='listenToClose' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import {
		uniIcons,
		uniGoodsNav,
		uniPopup
	} from '@dcloudio/uni-ui'
	import isLogin from '../../../components/isLogin.vue'
	export default {
		components: {
			uniIcons,
			uniGoodsNav,
			uniPopup,
			isLogin,
		},
		data() {
			return {
				showShare: false,
				showbuy: false,
				id: '',
				goodsDetails: {},
				goods_content: {},
				imgUrl: '',
				cartNum: 0, //购物车商品总数
				shopNum: 1,
				buyCartStatus: 0,
				isLogin: 1,
			}
		},
		onLoad(option) {
			let that = this
			this.id = option.goods_id
			this.imgUrl = this.$imgUrl
			this.getGoodsDetails(option.goods_id)
			if (!uni.getStorageSync('openid')) {
				return that.cartNum = 0
			} else {
				this.getCartNum()
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.goodsDetails.goods_name,
				path: 'pages/home/particulars/index?goods_id=' + this.id,
				imageUrl: '',
			}
		},
		onShareTimeline(res) {
			let that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			var img = that.imgUrl + that.goodsDetails.goods_image
			console.log(img)
			return {
				title: this.goodsDetails.goods_name,
				imageUrl: img
			}
		},
		methods: {
			// 监听关闭登录弹窗
			listenToClose(msg) {
				this.isLogin = msg
			},
			// 获取商品详情
			getGoodsDetails(id) {
				let that = this
				var data = {
					id: id,
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.default.GoodsUrl, data).then(res => {
					if (res.code == '200') {
						that.goodsDetails = res.data.data
						that.goods_content = res.data.data.goods_content.replace(/<img/g,
							'<img class="imhName" style="max-width: 100%!important;"');
						that.getGoodscode(id)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},

			// 获取商品二维码
			getGoodscode(id) {
				let that = this
				var data = {
					id: id,
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.default.getGoodsQR, data).then(res => {
					if (res.code == '200') {
						that.goodsDetails.mpqr = res.data.mpqr
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			//加减购物车
			editCart(id, status) {
				let that = this
				if (status == 0) {
					if (that.shopNum == 1) {
						return uni.showToast({
							title: '最低数量为1',
							icon: "none"
						})
					}
					that.shopNum--
				} else {
					if(this.goodsDetails.free_switch == 1){
						uni.showToast({
							title:'礼品最多只能购买一件',
							icon:'none'
						})
					}else{
						that.shopNum++
					}
				}
			},

			// 关闭分享
			closeShare() {
				this.showShare = false
			},

			showShopBuy(id) {
				//根据传参判断是加入还是购买
				// this.showbuy = true
				this.$refs.popup.open()
				this.buyCartStatus = id
			},
			// 关闭购买或者加入购物车
			closeBuy() {
				let that = this
				var status = that.buyCartStatus
				if (status == 1) {
					// 加购物车
					this.addCart()
				} else {
					if (!uni.getStorageSync('openid')) {
						return that.isLogin = 0
					}
					var data = {
						type: '1',
						goods_id: this.id,
						goods_num: this.shopNum,
						openid: uni.getStorageSync('openid')
					}
					this.$myRequest.post(this.$api.order.createOrderUrl, data).then(res => {
						if (res.code == '200') {
							var orderId = res.data.id
							uni.navigateTo({
								url: "../../shopCar/confirmOrder/index?orderId=" + orderId
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
					this.showbuy = false
				}
			},
			// 加入购物车
			addCart() {
				let that = this
				if (!uni.getStorageSync('openid')) {
					return that.isLogin = 0
				}
				this.$refs.popup.close();
				// this.showbuy = false
				var data = {
					openid: uni.getStorageSync('openid'),
					goods_id: that.id,
					goods_num: that.shopNum
				}
				this.$myRequest.post(this.$api.cart.addGoodsUrl, data).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: res.msg,
							icon: "success"
						})
						this.getCartNum()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 获取购物车商品总数
			getCartNum() {
				let that = this
				if (!uni.getStorageSync('openid')) {
					return that.cartNum = 0
				}
				var data = {
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.cart.cartGoodsListUrl, data).then(res => {
					if (res.code == '200') {
						that.cartNum = res.data.data.length
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 关闭购买弹窗
			closeBuyIcon() {
				this.showbuy = false
				this.$refs.popup.close();
				this.buyCartStatus = 0
			},
			//跳转购物车
			goCart() {
				uni.switchTab({
					url: "../../shopCar/index"
				})
			},
			// 生成海报
			// goPoster() {
			// 	let that = this
			// 	var postInfo = null;
			// 	this.showShare = false
			// 	uni.navigateTo({
			// 		url: "./poster?info=" + encodeURIComponent(JSON.stringify(that.goodsDetails))
			// 	})
			// },
			goPoster() {
				let that = this
				var postInfo = null;
				this.showShare = false
				uni.navigateTo({
					url: "./posterAgain?info=" + encodeURIComponent(JSON.stringify(that.goodsDetails))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	rich-text .imhName {
		max-width: 100% !important;
	}

	.content {
		width: 750rpx;

		image {
			width: 750rpx;
			height: 750rpx;
		}

		.title {
			width: 100%;
			background: #FFFFFF;

			.all {
				width: 690rpx;
				margin: 0 auto;

				.top {
					display: flex;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;

					.left {
						color: #F21515;
					}

					.right {
						width: 98rpx;
						line-height: 38rpx;
						text-align: center;
						color: #555555;
						background: #EFF0F2;
						border-radius: 19rpx;
						font-size: 22rpx;

						image {
							width: 23rpx;
							height: 23rpx;
							margin-right: 5rpx;
						}
					}
				}

				.name {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

			}
		}

		.introduce {
			text-align: center;
			margin-bottom: 50rpx;
			border-top: 28rpx solid #fff;

			.title {
				line-height: 70rpx;
				font-size: 26rpx;
				color: #666666;
				background: #EFF0F2;
			}

			.introduce-details {
				width: 100%;
				padding-bottom: 80rpx;
				margin-top: 25rpx;
			}
		}

		.dw {
			position: fixed;
			width: 750rpx;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.shop_bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 100%;
			height: 95rpx;

			.shop_bottom_left {
				width: 192rpx;
				height: 100%;

				.icon {
					width: 45rpx;
					height: 35rpx;
					position: relative;

					view {
						position: absolute;
						top: -12rpx;
						right: -15rpx;
						background: #F21515;
						display: -webkit-box;
						display: -webkit-flex;
						display: flex;
						box-sizing: border-box;
						overflow: hidden;
						-webkit-box-pack: center;
						-webkit-justify-content: center;
						justify-content: center;
						-webkit-box-orient: horizontal;
						-webkit-box-direction: normal;
						-webkit-flex-direction: row;
						flex-direction: row;
						height: 25rpx;
						line-height: 30rpx;
						color: #fff;
						border-radius: 100px;
						background-color: #f1f1f1;
						background-color: transparent;
						text-align: center;
						align-items: center;
						font-family: 'Helvetica Neue', Helvetica, sans-serif;
						font-size: 15rpx;
						padding: 0px 6rpx;
						background: red;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					color: #777777;
					font-size: 20rpx;
					margin-top: 5rpx;
				}
			}

			.shop_bottom_right {
				width: 528rpx;
				height: 100%;

				view {
					width: 50%;
					font-size: 30rpx;
					height: 100%;
				}

				.shop_bottom_right_ls {
					background: #F7DBC6;
					color: #AC6E40;
				}

				.shop_bottom_right_rg {
					background: #4b968d;
					color: #FFFFFF;
				}
			}
		}

		// 购买
		.buy_popup {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 550rpx;
			border-radius: 20px 20px 0px 0px;

			.buy_popup_contant {
				padding: 40rpx 31rpx 20rpx 31rpx;

				// 商品
				.buy_popup_contant_left {
					position: relative;

					.buy_popup_contant_left_img {
						width: 156rpx;
						height: 156rpx;
						border-radius: 10px;
					}

					view {
						position: absolute;
						left: 180rpx;
						bottom: 8rpx;
						margin: auto;
						color: #F21515;

					}
				}

				.buy_popup_contant_close {
					width: 38rpx;
					height: 38rpx;
				}



			}

			// 数量加减
			.buy_number_name {
				padding: 8rpx 31rpx;

				.buy_number_tit {
					font-size: 30rpx;
					color: #333333;
				}

				.edit_number_add,
				.edit_number_reduit {
					width: 36rpx;
					height: 36rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.edit_number_add {
					background-image: url(../../../static/icon/jia.png);
				}

				.edit_number_reduit {
					background-image: url(../../../static/icon/jian.png);
				}

				.edit_number_num {
					font-size: 32rpx;
					color: #294D7C;
					padding: 0 18rpx;
					min-width: 45rpx;
					text-align: center;
				}
			}

		}

		// 分享
		.share_popup {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 299rpx;
			border-radius: 20px 20px 0px 0px;

			button {
				width: 33%;
				background: #fff;
				border: #fff 1px solid;

				view {
					color: #666666;
					font-size: 24rpx;
					margin: 0 !important;
					text-align: center;
				}
			}

			button::after {
				border: #fff 1px solid;
			}

			.share_popup_top_info {
				width: 33%;
				margin-top: 44rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					display: block;
					margin: auto;
				}

				view {
					color: #666666;
					font-size: 24rpx;
					margin-top: 14rpx;
					text-align: center;
				}
			}



			.close_share {
				padding-top: 28rpx;
				text-align: center;
				font-size: 26rpx;
				color: #333;
			}
		}

		.islogin {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);

			.islogin_container {
				width: 540rpx;
				height: 295rpx;
				border-radius: 8rpx;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;

				.islogin_container_again {
					position: relative;
					height: 295rpx;
				}

				.islogin_name {
					color: #333333;
					font-size: 34rpx;
					padding-top: 45rpx;
				}

				.des {
					color: #555555;
					font-size: 24rpx;
					margin-top: 20rpx;
				}

				.islogin_bottom {
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 65rpx;
					border-top: 1px solid #E6E8EF;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;

					button {
						width: 50%;
						height: 100%;
						font-size: 28rpx;
						color: #294D7C;
						background-color: #fff;
						border: none;
					}

					button::after {
						border: none;
					}

					.left {
						border-right: 1px solid #E6E8EF;
					}
				}
			}

		}
	}
</style>
